<template>
	<view class="guide-page" :class="current == 0 ? 'guide-page2' : ( current == 1 ? 'guide-page1' : 'guide-page3')">
		<!-- 引导页 -->
		<view class="swiper-box">
			<swiper class="swiper" :current="current" @change="swiperChange">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="'page'+index">
					<image class="page-image" :src="item.bg" />
					<view class="color-w swiper-item-cont">
						<view class="w-100 text-center font-25">{{item.title}}</view>
						<view class="w-100 text-center m-t-20 font-18">{{item.tips}}</view>
						<view v-if="item.tips2" class="w-100 text-center m-t-20 font-18">{{item.tips2}}</view>
						<view class="flex swiper-dots-box flex-col-center flex-row-center" v-if="current===Number(index)">
							<view class="swiper-dots" v-for="(sItem,sIndex) in swiperList" :key="sIndex" :class="current===sIndex?'swiper-dots-act':''"></view>
						</view>
						<view class="swi-button" @tap="onLink">{{item.button}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getMonthTask,
		checkAdsSetting
	} from '@/common/api/advertising.js';
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			showMenu: {
				type: Boolean,
				default: true,
			}, //是否显示三个菜单入口
			swiperIndex: Number,
		},
		computed: {
			...mapState({
				current: state => state.init.guideCurrentPageIndex,
			})
		},
		data() {
			return {
				advertisingList: [], //广告收益规则
				guidePageId: '',
				swiperList: [{
					title: '福利大放送 看广告赚钱',
					tips: '每月最高可得180个广告积分收益',
					bg: '/static/discountCoupon/page01.png',
					button: '下一步'
				}, {
					title: '看广告赚钱收益',
					tips: '每月推荐1人注册且本人消费50元',
					tips2:'即可解锁看广告赚钱收益',
					bg: '/static/discountCoupon/page02.png',
					button: '下一步'
				}, {
					title: '解锁后每日看5个广告',
					tips: '即可获得6个广告积分',
					bg: '/static/discountCoupon/page03.png',
					button: '我知道了'
				}],
				isAdvertisingState: false, //是否已经解锁广告权益
			}
		},
		mounted() {
			this.getCheckAdsSetting()
		},
		methods: {
			getCheckAdsSetting() {
				checkAdsSetting().then(res => {
					this.advertisingList = res.data
				})
			},
			swiperChange(e) {
				let current = Number(e.detail.current)
				this.goTo(current)
			},
			goTo(current) {
				this.$store.commit('setGuideCurrentPageIndex', current)
			},
			onLink() {
				let current = Number(this.current) + 1
				if (current <= 2) {
					this.goTo(current)
				} else {
					//结束 清除引导页标识
					this.$store.commit('setGuideCurrentPageIndex', '')
					this.$emit('success')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.guide-page{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.guide-page1{
		background-image: url('@/static/discountCoupon/bg1.png');
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
	}
	.guide-page2{
		background-image: url('@/static/discountCoupon/bg2.png');
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
	}
	.guide-page3{
		background-image: url('@/static/discountCoupon/bg3.png');
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
	}

	.btn {
		padding: 12rpx 40rpx;
		border-radius: 40rpx;
	}

	.z-index {
		z-index: 99999;
	}

	.swiper-box {
		height: 100vh;
		position: absolute;
		background: rgba(0, 0, 0, .7);
		z-index: 99998;
		top: 0;
		width: 100%;

		.swiper {
			height: 100%
		}

		.swiper-item-cont {
			position: absolute;
			// bottom: 0;
			// height: 32vh;
			top: calc(var(--status-bar-height) + 190rpx + 384rpx + 300rpx);
			width: 750rpx;
			z-index: 10000;
		}

		.swi-button {
			margin: 32rpx auto 0 auto;
			border: 2rpx solid #FFFFFF;
			width: 267rpx;
			text-align: center;
			line-height: 67rpx;
			height: 67rpx;
			border-radius: 50rpx;
		}


	}

	.swiper-dots-box {
		width: 750rpx;
		margin-top: 73rpx;

		.swiper-dots {
			border-radius: 100%;
			width: 16rpx;
			height: 16rpx;
			background: #FFFFFF;
			opacity: 0.5;
			margin: 0 5rpx;
		}

		.swiper-dots-act {
			opacity: 1;
			background: red;
		}
	}

	.page0 .page-image {
		position: absolute;
		width: calc(100% - 6vw);
		height: 230rpx;
		left: 3vw;
		top: calc(var(--status-bar-height) + 600rpx);
	}

	.page1 .page-image {
		position: absolute;
		width: calc(100% - 6vw);
		height: 670rpx;
		left: 3vw;
		top: calc(var(--status-bar-height) + 240rpx);
	}

	.page2 .page-image {
		position: absolute;
		width: calc(100% - 6vw);
		height: 620rpx;
		left: 3vw;
		top: calc(var(--status-bar-height) + 240rpx);
	}

	.tips-cont {
		padding: 322rpx 50rpx 20rpx 50rpx;

		.tips-text {
			height: 262rpx;
		}

		.cancel-btn {
			width: 232rpx;
			text-align: center;
			height: 78rpx;
			line-height: 78rpx;
			background: #FF1A1A;
			border-radius: 12rpx;
			margin: 30rpx auto 0 auto;
		}
	}
</style>